﻿<div>

    <script type="text/javascript">
        $(function () {
            $("#Button1").click(function () {
                $.easyui.showDialog({
                    title: "框中创建的Dialog",
                    top: 130, left: 170, width: 400, height: 200,
                    locale: "#container"
                });
            });

            $("#Button2").click(function () {
                $.easyui.showDialog({
                    title: "'功能演示' 选项卡中创建的Dialog",
                    href: "dialog/easy/loacle/test.html",
                    top: 130, left: 170, width: 400, height: 200,
                    locale: "#demo"     //  当前页面中 "功能演示" 选项卡的 ID 值为 "demo"
                });
            });

            $("#Button3").click(function () {
                $.easyui.showDialog({
                    title: "当前页面中创建的Dialog",
                    top: 130, left: 170, width: 400, height: 200,
                    topMost: false
                });
            });

            $("#Button4").click(function () {
                $.easyui.showDialog({
                    title: "'顶级页面中创建的Dialog",
                    top: 130, left: 170, width: 400, height: 200,
                    topMost: true
                });
            });
        });
    </script>

    <h2>jEasyUI Dialog Extensions - 快速创建 Dialog - 指定 Dialog 的父级容器</h2>
    <p>该部分扩展由文件 jeasyui.extensions.dialog.js 实现。</p>
    <hr />
    <input id="Button1" type="button" value="在下面的框中创建Dialog" />
    <input id="Button2" type="button" value="在当前 '功能演示' 选项卡中创建Dialog" />
    <input id="Button3" type="button" value="在当前页面创建Dialog" />
    <input id="Button4" type="button" value="在顶级页面创建Dialog" />
    <hr />
    <div id="container" style="border-width: 1px; border-color: Black; border-style: solid; width: 800px; height: 400px; position: relative;"></div>

</div>